<template lang="pug">
  #amap
    #container
</template>

<script>
  /**
   * 高德地图组件，基于vue2.0 es6标准
   * created by lvjia on 20170318
   */
  export default {
    name: 'vue-amap',
    data () {
      return {
        // Global引用
        _globalAmap: null,
        // 本地map实例
        _map: null,
        // 本地geolocation实例
        _geolocation: null,
        // debug use
        poiList: '',
        markers: [],
        zoom: 0
      }
    },
    props: {},
    methods: {
      /**
       * 初始化本地map实例，传入脚本运行后挂载的BMap对象
       * @param BMap
       */
      _initMap (AMap) {
        // var map, geolocation
        this._globalAmap = AMap
        // 加载地图，调用浏览器定位服务
        this._map = new AMap.Map('container', {
          resizeEnable: true
        })

        // 地图中心标记
        AMap.CenterControlDiv = function () {
        }

        // 计算容器的中心点
        let container = document.getElementById('container')
        // window.alert(container.offsetWidth)
        let centerX = Math.round(container.offsetWidth / 2)
        let centerY = Math.round(container.offsetHeight / 2)

        AMap.CenterControlDiv.prototype = {
          addTo: function (map, dom) {
            dom.appendChild(this._getHtmlDom(map))
          },
          _getHtmlDom: function (map) {
            this.map = map
            // 创建一个能承载控件的<div>容器
            let controlUI = document.createElement('DIV')
            controlUI.className = 'center'
            // 设置控件的位置
            controlUI.style.position = 'absolute'
            controlUI.style.left = (centerX - 10) + 'px'
            controlUI.style.top = (centerY - 20) + 'px'
            controlUI.style.zIndex = '300'
            // 设置控件字体样式
            // controlUI.innerHTML = `<img width="20" height="20" src="http://download.easyicon.net/png/1182024/128/">`
            controlUI.innerHTML = `              <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
              <rect id="pin-body" x="9.1" y="19.5" fill="#222222" width="4" height="21.9"/>
              <circle id="pin-header" fill="#222222" cx="11.1" cy="10.9" r="9.6"/>
              <circle id="pin-hole" fill="#FFFFFF" cx="11.1" cy="10.9" r="5.1"/>
              </svg>`
            return controlUI
          }
        }
        let centerControl = new AMap.CenterControlDiv(this._map)
        this._map.addControl(centerControl)

        this._map.plugin(['AMap.ToolBar'], () => {
          this._map.addControl(new this._globalAmap.ToolBar())
        })
        if (location.href.indexOf('&guide=1') !== -1) {
          this._map.setStatus({ scrollWheel: false })
        }
        /*
        // 监听地图移动事件
        this._map.on('moveend', (e) => {
          // window.alert(JSON.stringify(e))
          // 查询城市信息
          this._map.getCity((data) => {
            if (data['province'] && typeof data['province'] === 'string') {
              // 发送当前城市信息
              this.$store.dispatch('amapSetCurrentCity', data)
            }
          })
          // 同步当前地图中心点
          this.$store.dispatch('amapSetMapCenter', this._map.getCenter())
          // 搜索周边
          this._globalAmap.service(['AMap.PlaceSearch'], () => {
            // 构造地点查询类
            let placeSearch = new this._globalAmap.PlaceSearch({
              pageSize: 10,
              type: '',
              pageIndex: 1,
              city: '海口市' // 城市
              // map: this._map
            })
            placeSearch.searchNearBy('', this._map.getCenter(), 200, (status, result) => {
              // window.alert(JSON.stringify(result))
              // 发送当前周边地址信息
              this.$store.dispatch('amapSetLocationSearchResults', result)
            })
          })

          // 搜索cloud poi
          let searchOptions = {
            // map: this._map,
            // panel: 'panel',
            keywords: '',
            pageSize: 5,
            orderBy: '_id:ASC'
          }
          // 获取当前视口bounds
          let bounds = this._map.getBounds()

          // 加载CloudDataSearch服务插件
          this._globalAmap.service(['AMap.CloudDataSearch'], () => {
            let search = new this._globalAmap.CloudDataSearch('58d215ec305a2a68100c996e', searchOptions)
            search.searchInPolygon([bounds.getNorthEast(), bounds.getSouthWest()], (status, result) => {
              // window.alert(JSON.stringify(result))
              // 清除上一次的marker
              this._map.remove(this.markers)
              // 显示marker
              this.poiList = JSON.stringify(result)
              if (status === 'no_data') {
              } else {
                for (let i = 0; i < result.datas.length; i++) {
                  let marker = new this._globalAmap.Marker({
                    map: this._map,
                    position: result.datas[i]._location,
                    // title: result.datas[i].count
                    content: `<div class="map-marker"><p>${result.datas[i].count}</p><div class="triangle-down"></div><div class="shadow-wrapper"><div class="triangle-shadow"></div></div></div>`
                  })
                  this.markers.push(marker)
                }
              }
              // 发送当前周边地址信息
              this.$store.dispatch('amapSetPoiSearchResults', result)
            })
          })
        })
        */
        // 定位
        this._map.plugin('AMap.Geolocation', () => {
          this._geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000,          // 超过10秒后停止定位，默认：无穷大
            // noIpLocate: 3,
            // noGeoLocation: 3,
            // convert: true,
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'LB'
            // showCircle: true,
            // showMarker: true
          })
          this._map.addControl(this._geolocation)
          this._geolocation.getCurrentPosition()
          AMap.event.addListener(this._geolocation, 'complete', this.onComplete) // 返回定位信息
          AMap.event.addListener(this._geolocation, 'error', this.onError)      // 返回定位出错信息
        })
      },
      // 解析定位结果
      onComplete (data) {
        // 监听缩放事件
        this.zoom = this._map.getZoom()
        this._globalAmap.event.addListener(this._map, 'zoomend', () => {
          this.zoom = this._map.getZoom()
          this._map.remove(this.markers)
          // 搜索cloud poi
          // 按照zoom level 设置查询条件
          let searchOptions
          // window.alert(this.zoom)
          if (this.zoom <= 12) {
            // 查询区域总和
            searchOptions = {
              // map: this._map,
              // panel: 'panel',
              keywords: '',
              filter: 'type:1',
              pageSize: 10
            }
          } else {
            // 查询单点
            searchOptions = {
              // map: this._map,
              // panel: 'panel',
              keywords: '',
              filter: 'type:0',
              pageSize: 10
              // orderBy: '_id:ASC'
            }
          }
          // 获取当前视口bounds
          let bounds = this._map.getBounds()

          // window.alert(JSON.stringify(searchOptions))
          // 加载CloudDataSearch服务插件
          this._globalAmap.service(['AMap.CloudDataSearch'], () => {
            let search = new this._globalAmap.CloudDataSearch('58d215ec305a2a68100c996e', searchOptions)
            search.searchInPolygon([bounds.getNorthEast(), bounds.getSouthWest()], (status, result) => {
              // window.alert(JSON.stringify(result))
              // 清除上一次的marker
              // this._map.remove(this.markers)
              // 显示marker
              this.poiList = JSON.stringify(result)
              if (status === 'no_data') {
              } else {
                for (let i = 0; i < result.datas.length; i++) {
                  let marker = new this._globalAmap.Marker({
                    map: this._map,
                    position: result.datas[i]._location,
                    // title: result.datas[i].count
                    content: `<div class="map-marker"><p>${result.datas[i].count}</p><div class="triangle-down"></div><div class="shadow-wrapper"><div class="triangle-shadow"></div></div></div>`
                  })
                  this.markers.push(marker)
                }
              }
              // 发送当前周边地址信息
              this.$store.dispatch('amapSetPoiSearchResults', result)
            })
          })
        })
        // 搜索周边
        this._globalAmap.service(['AMap.PlaceSearch'], () => {
          // 构造地点查询类
          let placeSearch = new this._globalAmap.PlaceSearch({
            pageSize: 10,
            type: '',
            pageIndex: 1
            // city: '海口市' // 城市
            // map: this._map
          })
          placeSearch.searchNearBy('', this._map.getCenter(), 1000, (status, result) => {
            if (status === 'no_data') {
            } else {
//              for (let i = 0; i < result.poiList.pois.length; i++) {
//                let marker = new this._globalAmap.Marker({
//                  map: this._map,
//                  position: result.poiList.pois[i].location
//                  // title: result.datas[i].count
//                  // content: `<div class="map-marker"><p>${result.datas[i].count}</p><div class="triangle-down"></div><div class="shadow-wrapper"><div class="triangle-shadow"></div></div></div>`
//                })
//                marker.setLabel({
//                  offset: new this._globalAmap.Pixel(20, 20)
//                  // content: result.poiList.pois[i].name + '-' + result.poiList.pois[i].distance + 'm'
//                })
//                this.markers.push(marker)
//              }
            }
            // 发送当前周边地址信息
            this.$store.dispatch('amapSetLocationSearchResults', result)
          })

          this._map.on('movestart', (e) => {
            this._map.remove(this.markers)
          })
          // 监听地图移动事件
          this._map.on('moveend', (e) => {
            // window.alert(JSON.stringify(e))
            this.searchCity()
            // this.centerMarker.setPosition(this._map.getCenter())
            this.getCenter()

            placeSearch.searchNearBy('', this._map.getCenter(), 1000, (status, result) => {
              // window.alert(JSON.stringify(result))
              // 清除上一次的marker
              // 显示marker
              // this.poiList = JSON.stringify(result)
              if (status === 'no_data') {
              } else {
//                for (let i = 0; i < result.poiList.pois.length; i++) {
//                  // new marker
//                  // window.alert(JSON.stringify(this.markerData))
//                  let marker = new this._globalAmap.Marker({
//                    map: this._map,
//                    position: result.poiList.pois[i].location
//                    // title: result.datas[i].count
//                    // content: `<div class="map-marker"><p>${result.datas[i].count}</p><div class="triangle-down"></div><div class="shadow-wrapper"><div class="triangle-shadow"></div></div></div>`
//                  })
//                  marker.setLabel({
//                    offset: new this._globalAmap.Pixel(20, 20)
//                    // content: result.poiList.pois[i].name + '-' + result.poiList.pois[i].distance + 'm'
//                  })
//                  this.markers.push(marker)
//                }
                // 发送当前周边地址信息
                this.$store.dispatch('amapSetLocationSearchResults', result)
              }
            })

            // 搜索cloud poi
            // 按照zoom level 设置查询条件
            let searchOptions
            // window.alert(this.zoom)
            if (this.zoom <= 12) {
              // 查询区域总和
              searchOptions = {
                // map: this._map,
                // panel: 'panel',
                keywords: '',
                filter: 'type:1',
                pageSize: 10
              }
            } else {
              // 查询单点
              searchOptions = {
                // map: this._map,
                // panel: 'panel',
                keywords: '',
                filter: 'type:0',
                pageSize: 10
                // orderBy: '_id:ASC'
              }
            }
            // 获取当前视口bounds
            let bounds = this._map.getBounds()

            // window.alert(JSON.stringify(searchOptions))
            // 加载CloudDataSearch服务插件
            this._globalAmap.service(['AMap.CloudDataSearch'], () => {
              let search = new this._globalAmap.CloudDataSearch('58d215ec305a2a68100c996e', searchOptions)
              search.searchInPolygon([bounds.getNorthEast(), bounds.getSouthWest()], (status, result) => {
                // window.alert(JSON.stringify(result))
                // 清除上一次的marker
                // this._map.remove(this.markers)
                // 显示marker
                this.poiList = JSON.stringify(result)
                if (status === 'no_data') {
                } else {
                  for (let i = 0; i < result.datas.length; i++) {
                    let marker = new this._globalAmap.Marker({
                      map: this._map,
                      position: result.datas[i]._location,
                      // title: result.datas[i].count
                      content: `<div class="map-marker"><p>${result.datas[i].count}</p><div class="triangle-down"></div><div class="shadow-wrapper"><div class="triangle-shadow"></div></div></div>`
                    })
                    this.markers.push(marker)
                  }
                }
                // 发送当前周边地址信息
                this.$store.dispatch('amapSetPoiSearchResults', result)
              })
            })
          })
        })
      },
      // 解析定位错误信息
      onError (data) {
        // document.getElementById('tip').innerHTML = '定位失败'
      },
      searchLocationData () {

      },
      searchCloudData () {

      },
      searchCity () {
        // 查询城市信息
        this._map.getCity((data) => {
          if (data['province'] && typeof data['province'] === 'string') {
            // 发送当前城市信息
            this.$store.dispatch('amapSetCurrentCity', data)
          }
        })
      },
      getCenter () {
        // 同步当前地图中心点
        this.$store.dispatch('amapSetMapCenter', this._map.getCenter())
      },
      // 手动刷新定位信息
      refresh () {
        this._geolocation.getCurrentPosition()
      },
      /**
       * 初始化地图脚本
       * @returns {*}
       */
      _loadScript () {
        if (!global.AMap) {
          return new Promise((resolve, reject) => {
            global._init = function () {
              resolve(global.AMap)
              global.document.body.removeChild($script)
              global._init = null
            }
            const $script = document.createElement('script')
            global.document.body.appendChild($script)
            $script.src = 'http://webapi.amap.com/maps?v=1.3&key=6a46e03bea82e6046f9388f6b6f4539b&callback=_init'
          })
        }
        return Promise.resolve(global.AMap)
      }
    },
    created () {
      console.log('created')
      const {_loadScript, _initMap} = this
      _loadScript().then(_initMap)
    },
    computed: {
      // 获取store中refresh标志
      needRefresh () {
        return this.$store.state.amap.status.needRefresh
      },
      // 获取省信息
      city () {
        return this.$store.state.amap.currentCity.city
      },
      // zoom
      zoom () {
        return this.$store.state.amap.zoom
      },
      center () {
        return this.$store.state.amap.mapCenter
      }
    },
    watch: {
      // 监视是否需要刷新
      needRefresh: function () {
        if (this.needRefresh) {
          // refresh
          this.refresh()
          // set to false
          this.$store.dispatch('amapRefreshCompleted')
        }
      },
      city: function () {
        this._map.setCity(this.city)
      },
      zoom: function () {
        this._map.setZoom(this.zoom)
      },
      center: function () {
        this._map.setCenter(this.center)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import './amap.styl'
</style>

